<template>
    <view class="iot-cates" hover-class="none" :hover-stop-propagation="false">
        <SearchInput></SearchInput>
        <view class="iot-cates-container" hover-class="none" :hover-stop-propagation="false">
            <scroll-view scroll-y class="iot-left-menu">
                <view :class="'iot-menu-item ' + (index === currentIndex ? 'iot-active' : '')" hover-class="none"
                    :hover-stop-propagation="false" @tap="handleitemtap" :data-index="index"
                    v-for="(item, index) in leftmenulist" :key="index">
                    {{ item }}
                </view>
            </scroll-view>
            <!-- 右边 -->
            <scroll-view scroll-top="{scrolltop}" scroll-y class="iot-right-content">
                <view class="iot-goods-group" v-for="(item1, index1) in rightcontent" :key="index1">
                    <view class="iot-goods-title">
                        <text class="iot-delimiter">/</text>
                        <text class="iot-title">{{ item1.cat_name }}</text>
                        <text class="iot-delimiter">/</text>
                    </view>

                    <view class="iot-goods-list">
                        <navigator class="iot-navigator" :url="'/pages/goods-list/index?cid=' + item2.cat_id"
                            v-for="(item2, index2) in item1.children" :key="item2.cat_id">
                            <image :src="item2.cat_icon" mode="widthFix"></image>

                            <view class="iot-goods-name">
                                {{ item2.cat_name }}
                            </view>
                        </navigator>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import SearchInput from '../../components/SearchInput/SearchInput';
import { request } from '../../request/index.js';

export default {
    components: {
        SearchInput
    },
    data() {
        return {
            leftmenulist: [],
            rightcontent: [],
            currentIndex: 0,
            scrolltop: 0,
            Cates: []
        };
    },
    onLoad: function (options) {
        const Cates = uni.getStorageSync('cates');
        if (!Cates) {
            this.getCates();
        } else {
            if (Date.now() - Cates.time > 1000 * 10) {
                this.getCates();
            } else {
                this.Cates = Cates.data;
                let leftmenulist = this.Cates.map((v) => v.cat_name);
                let rightcontent = this.Cates[0].children;

                this.leftmenulist = leftmenulist
                this.rightcontent = rightcontent

            }
        }
    },
    methods: {
        async getCates() {
            /* request({
        url: "/categories"
      })
        .then(res => {
          this.Cates = res.data.message;
          wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
          //左边菜单
          let leftmenulist = this.Cates.map(v => v.cat_name);
          //右边数据
          let rightcontent = this.Cates[0].children;
          this.setData({
            leftmenulist,
            rightcontent
          })
          }) */
            const res = await request({
                url: '/categories'
            });
            this.Cates = res;
            uni.setStorageSync('cates', {
                time: Date.now(),
                data: this.Cates
            });
            //左边菜单
            let leftmenulist = this.Cates.map((v) => v.cat_name);
            //右边数据
            let rightcontent = this.Cates[0].children;
            this.leftmenulist = leftmenulist
            this.rightcontent = rightcontent
        },

        //左侧点击事件
        handleitemtap(e) {
            const { index } = e.currentTarget.dataset;
            let rightcontent = this.Cates[index].children;

            this.currentIndex = index
            this.rightcontent = rightcontent
            this.scrolltop = 0

        }
    }
};
</script>
<style>
@import './index.css';
</style>
